<script setup>
import { ref } from 'vue'
import PageContainer from '@/components/container/PageContainer.vue'
import {
  patientClassifyListAPI,
  patientClassifyDeleteAPI
} from '@/api/patientClassify.js'

import ClassifyDrawer from './components/ClassifyDrawer.vue'

// 医生分类页面数据
const list = ref([])

// 分页参数
const params = ref({
  pageNum: 1,
  pageSize: 6,
  classifyName: ''
})

// 总数
const total = ref(0)

// 绑定分类抽屉
const classifyDrawerRef = ref(null)

/**
 * 获取患者列表
 */
const getClassifyList = async () => {
  const result = await patientClassifyListAPI(params.value)
  list.value = result.data.data.records
  total.value = result.data.data.total
}
// 获取患者列表
getClassifyList()

/**
 * 页码改变
 */
const onCurrentChange = (page) => {
  // 重置页码
  params.value.pageNum = page
  // 发送请求获取数据
  getClassifyList(params.value)
}

/**
 * 页码大小改变
 */
const onSizeChange = (size) => {
  // 重置页码
  params.value.pageNum = 1
  // 重置每页显示条数
  params.value.pageSize = size
  // 发送请求获取数据
  getClassifyList(params.value)
}

/**
 * 顶部条件搜索似事件
 */
const onSearch = async () => {
  // 判断数据是否为空
  if (params.value.classifyName === '') {
    ElMessage.warning('请先输入搜索条件')
    return
  }
  // 发送请求获取数据
  getClassifyList(params.value)
  ElMessage.success('搜索成功')
}

/**
 * 重置搜索条件
 */
const onReset = async () => {
  // 判断数据是否为空
  if (params.value.classifyName === '') {
    ElMessage.warning('请先输入搜索条件')
    return
  }
  params.value = {
    classifyName: ''
  }
  // 重置页码
  params.value.pageNum = 1
  // 重置每页显示条数
  params.value.pageSize = 6
  // 发送请求获取数据
  getClassifyList(params.value)
  ElMessage.success('重置成功')
}

/**
 * 新增分类
 */
const addClassify = () => {
  classifyDrawerRef.value.open('patientClassify')
}

/**
 * 编辑分类
 */
const editClassify = (index, row) => {
  classifyDrawerRef.value.open('patientClassify', row)
}

/**
 * 接收分类抽屉刷新事件
 */
const handleRefresh = () => {
  // 发送请求获取数据
  getClassifyList(params.value)
}

/**
 * 删除分类
 */
const delClassify = (index, row) => {
  ElMessageBox.confirm(
    `确定删除 [${row.classifyName}] 分类吗？`,
    '提示',
    {
      cancelButtonText: '取消',
      confirmButtonText: '确定',
      type: 'warning'
    }
  )
    .then(async () => {
      // 发送请求删除分类
      await patientClassifyDeleteAPI(row.id)
      // 刷新页面
      getClassifyList(params.value)
      // 提示成功
      ElMessage.success('删除成功')
    })
    .catch(() => {
      // 取消删除
      ElMessage.info('已取消删除')
    })
}
</script>

<template>
  <PageContainer title="病人分类">
    <template #extra>
      <el-button
        type="primary"
        size="default"
        @click="addClassify"
        >新增患者分类
      </el-button>
    </template>

    <!-- 头部搜索表单 -->
    <div class="top-form-container">
      <el-form
        class="top-form"
        :inline="true"
        :model="params"
      >
        <div class="form-item">
          <!-- 患者信息 -->
          <el-form-item label="分类名:">
            <el-input
              placeholder="请输入分类名"
              v-model="params.classifyName"
            ></el-input>
          </el-form-item>
        </div>

        <div class="form-btn">
          <!-- 搜索 和 重置 -->
          <el-form-item>
            <el-button type="primary" @click="onSearch">
              搜索
            </el-button>
            <el-button type="primary" @click="onReset">
              重置
            </el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>

    <!-- 表格 -->
    <el-table
      ref="doctorTableRef"
      :data="list"
      :header-cell-style="{
        textAlign: 'center',
        position: 'sticky',
        top: '0'
      }"
      :cell-style="{ textAlign: 'center' }"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      border
      highlight-current-row
      stripe
      size="large"
      class="patient-table"
    >
      <!-- 选择列 -->
      <el-table-column type="selection" width="80" />

      <!-- 设置编号列 -->
      <el-table-column
        type="index"
        label="编号"
        width="100"
      />

      <!-- 分类名 -->
      <el-table-column
        prop="classifyName"
        label="分类名"
        width="200"
      />

      <!-- 分类描述 -->
      <el-table-column
        prop="classifyDec"
        label="分类描述"
        width="500"
      />

      <!-- 创建时间列 -->
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="200"
      />

      <!-- 表格操作按钮 -->
      <!-- 功能按钮列 -->
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            size="mid"
            type="success"
            auto-insert-space
            plain
            @click="editClassify(scope.$index, scope.row)"
          >
            编辑
          </el-button>
          <el-button
            size="mid"
            type="danger"
            auto-insert-space
            plain
            @click="delClassify(scope.$index, scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>

      <!-- 设置空数据模板 -->
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      v-model:current-page="params.pageNum"
      v-model:page-size="params.pageSize"
      :page-sizes="[6, 8, 10]"
      layout="jumper, total, sizes, prev, pager, next"
      background
      :total="total"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
      style="margin-top: 20px; justify-content: flex-end"
    />

    <!-- 分类抽屉 -->
    <!-- 分类抽屉 -->
    <ClassifyDrawer
      ref="classifyDrawerRef"
      @refresh="handleRefresh"
    />
  </PageContainer>
</template>

<style scoped lang="scss">
.top-form-container {
  // 设置弹性布局
  display: flex;

  // 头部表单
  .top-form {
    display: flex;
    // 设置下边距
    margin-bottom: 20px;

    // 表格表单
    .form-item {
      .el-form-item {
        // 设置item的右边距
        margin-right: 20px;
      }
    }

    // 表单按钮
    .form-btn {
      // 设置左边距
      margin-left: 20px;
    }
  }

  // 批量删除按钮
  .batchDelete-btn {
    // 设置位置在右边
    margin-left: auto;
  }
}
</style>
